<template>
  <div class="vipCode">
    <div class="searchBlock" style="margin-top:2rem">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="formCode.counts"
            placeholder="请输入生成数量"
            type="number"
            style="width:200px"
          />
          <el-select v-model="formCode.type" placeholder="请选择激活码类型">
            <el-option value="1" label="一周"/>
            <el-option value="2" label="一季"/>
            <el-option value="3" label="半年"/>
            <el-option value="4" label="一年"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getCode">批量生成</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="searchBlock">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="formSearch.type" placeholder="请选择激活码类型">
            <el-option
              v-for="item in dateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formSearch.status" placeholder="请选择激活码码状态">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{ $t('table.search') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="downloadLoading"
            @click="handleDownload"
          >{{ $t('table.export') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBlock">
      <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="cardCode" label="卡号"/>
        <el-table-column prop="activateCode" label="激活码"/>
        <el-table-column prop="status" label="激活码状态"/>
        <el-table-column prop="type" label="激活码类型"/>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >{{ $t('table.edit') }}</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >{{ $t('table.delete') }}</el-button>
          </template>
        </el-table-column>-->
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        layout="prev, pager, next"
        :total="totalNum"
        @prev-click="prevData"
        @next-click="nextData"
        @current-change="currentData"
      />
    </div>
  </div>
</template>

<script>
import { parseTime } from "@/utils";
import https from "../../https.js";
import axios from "axios";

export default {
  name: "VipCode",
  components: {},
  data() {
    return {
      formCode: {
        type: "",
        counts: ""
      },
      formSearch: {
        type: "",
        status: ""
      },
      codeType: ["一周", "一季", "半年", "一年"],
      codeStatus: ["有效", "失效"],
      formInline: {
        user: "",
        region: ""
      },
      dateList: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "1",
          label: "一周"
        },
        {
          value: "2",
          label: "一季"
        },
        {
          value: "3",
          label: "半年"
        },
        {
          value: "4",
          label: "一年"
        }
      ],
      dateValue: "",
      typeList: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "1",
          label: "有效"
        },
        {
          value: "2",
          label: "失效"
        }
      ],
      numberValue: "",
      numberList: [
        {
          value: "0",
          label: "100"
        },
        {
          value: "1",
          label: "500"
        },
        {
          value: "2",
          label: "1000"
        },
        {
          value: "3",
          label: "5000"
        },
        {
          value: "4",
          label: "10000"
        }
      ],
      typeValue: "",
      tableData: [],
      downloadLoading: false,
      pageSize: 20,
      page: 0,
      totalNum: 0
    };
  },
  computed: {},
  mounted() {
    this.getData();
  },
  methods: {
    onSubmit() {
      this.page = 0;
      this.tableData = [];
      this.getData();
    },
    getCode() {
      let data = this.formCode;
      axios({
        url: "http://test.api.w-lans.cn/api/v1.0/createActivateCodeList",
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: data
      })
        .then(res => {
          this.$message({
            message: "生成成功",
            type: "success"
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    prevData() {
      let page = --this.page;
      this.page = page;
      this.tableData = [];
      this.getData();
    },
    nextData() {
      this.tableData = [];
      this.getData();
    },
    currentData(e) {
      let page = --e;
      this.page = page;
      this.tableData = [];
      this.getData();
    },
    getData() {
      let page = ++this.page;
      let data = {
        pageNumber: page,
        pageSize: this.pageSize,
        type: this.formSearch.type,
        status: this.formSearch.status
      };
      axios({
        url: "http://test.api.w-lans.cn/api/v1.0/activateCodeList",
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: data
      })
        .then(res => {
          let data = res.data.Result.data;
          for (let i = 0; i < data.length; i++) {
            data[i].status = this.codeStatus[data[i].status - 1];
            data[i].type = this.codeType[data[i].type - 1];
            this.tableData.push(data[i]);
          }
          this.totalNum = res.data.Result.total;
          this.page = page;
        })
        .catch(err => {
          console.log(err);
        });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = ["卡号", "激活码", "激活码类型", "激活码状态"];
        const filterVal = ["cardCode", "activateCode", "type", "status"];
        const data = this.formatJson(filterVal, this.tableData);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "table-list"
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    }
  }
};
</script>
<style>
.searchBlock {
  width: 96%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 2%;
}
.tableBlock {
  width: 96%;
  margin-left: 2%;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.pagination {
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10rem;
}
.blockRight {
  margin-left: 20%;
}
</style>

